<template>
	<view class="main-page">
		<u-navbar :placeholder="true" title="我的订单" :autoBack="true"></u-navbar>
		<u-tabs
			class="tabs"
			:current="current"
			:list="orderStatus"
			lineColor="#fdca00"
			:itemStyle="{ width:'20%',padding:'10px 0' }"
			@click="tabChange"></u-tabs>
		<scroll-view class="container" @scrolltolower="getLists" :scroll-y="true">
			<view class="order-container">
				<view class="order-item" v-for="item,index in lists" :key="index">
					<view class="order-sn">
						<text class="sn">{{item.no}}</text>
						<u--text class="state" size="26rpx" :type="colors[item.state]" :text="Enums.OrderState[item.state]"></u--text>
					</view>
					<view class="content">
						<view class="content-item">
							<text class="label">订单类型：</text>
							<text class="value">{{Enums.OrderType[item.type]}}</text>
						</view>
						<view class="content-item">
							<text class="label">款号：</text>
							<text class="value">{{item.product_no}}</text>
						</view>
						<view class="content-item">
							<text class="label">数量：</text>
							<text class="value">{{item.num}}</text>
						</view>
						<view class="content-item">
							<text class="label">类型：</text>
							<text class="value">{{item.productCategory ? item.productCategory.title : ''}}</text>
						</view>
						<view class="content-item">
							<text class="label">总额：</text>
							<text class="value">{{item.amount}}</text>
						</view>
					</view>
					<view class="btns-item">
						<view class=""></view>
						<view class="btns">
							<!-- <u-button shape="circle" size="small" type="primary" text="支付" v-if="item.pay_state != 2"></u-button> -->
							<u-button shape="circle" size="small" type="success" text="详情" @tap="detail(index)"></u-button>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</scroll-view>
	</view>
</template>

<script>
	import { getOrderLists } from '@/common/api.js'
	
	export default {
		data() {
			return {
				orderStatus: [{
					name: '全部',
				}, {
					name: '已下单',
				}, {
					name: '已确认',
				}, {
					name: '生产中'
				}, {
					name: '已送货'
				}, {
					name: '已完成'
				}],
				status: 'loadmore',
				current: 0,
				listQuery: {
					limit: 8,
					page: 1,
					status: 0
				},
				lists: [],
				colors: [ 'primary', 'warning', 'success', 'error', 'info']
			}
		},
		onLoad(params) {
			this.listQuery.status = params.tab ? params.tab : 0;
			this.current = params.tab ? params.tab : 0;
		},
		onShow() {
			this.listQuery.page = 1;
			this.lists = [];
			this.status = 'loadmore';
			this.getLists();
		},
		methods: {
			tabChange(e) {
				this.current = e.index;
				this.listQuery.status = e.index;
				this.listQuery.page = 1;
				this.lists = [];
				this.status = 'loadmore';
				this.getLists();
			},
			getLists() {
				if (this.status == 'loading') return false;
				if (this.status == 'nomore') return false;
				this.status = 'loading';
				getOrderLists(this.listQuery).then((res) => {
					let {
						current_page,
						per_page,
						last_page,
						data
					} = res;
					if (current_page == last_page || last_page === 0) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
						this.listQuery.page++;
					}
					data.forEach((item) => {
						// item.room_type_str = item.hotels ? (this.hotelsConfigs[item.hotels.room_type] ? this.hotelsConfigs[item.hotels.room_type]['title'] : '') : '';
						// item.status_str = orderState(item);
						// item.status_color = orderState(item, 'color');
						this.lists.push(item);
					});
				});
			},
			detail(index) {
				const item = this.lists[index];
				uni.navigateTo({
					url: '/pages/user/orderDetail?order_no=' + item.no,
				});
			},
		}
	}
</script>

<style lang="scss">
	.u-tabs {
		.u-tabs__wrapper__nav {  }
	}
	.container {
		height: calc(100vh - 170rpx); padding-bottom: 20rpx;
	}
	.tabs { background-color: #ffffff; }
	.order-container {
		padding: 20rpx;
		font-size: 28rpx;
		.order-item {
			background-color: #ffffff; border-radius: 20rpx; padding:0 25rpx;
			.order-sn {
				display: flex; justify-content: space-between; padding: 20rpx 0; border-bottom:1px solid #e2e2e2 ;
				.sn {  }
				.state { width: 100rpx; flex: none;  }
			}
			.content { 
				padding: 10rpx; 
				.content-item {
					display: flex; 
					.label { color: #90939c;padding-right: 10rpx;}
					.value { color: #444959; }
				}
			}
			.btns-item { 
				padding: 10rpx 0 20rpx; justify-content: space-between; display: flex;
				.btns {
					display: flex; justify-content: flex-end;
					.u-button { width: 100rpx; }
					.u-button + .u-button { margin-left: 20rpx; }
				}
			}
		}
		.order-item + .order-item { 
			margin-top: 30rpx;
		}
	}
</style>
